<template>
    <div class="todomain">
        <mainInput @transmit="transmit"/>
        <mainItem 
            :todo ='todo' 
            v-for ="todo in filterTodos" :key="todo.id"
            @deleteTodo = "deleteTodo"
        />
        <mainTabs
            :filter ='filter'
            :todos ='todos'
            @toggle ="toggle"
            @clearCompletedTodos ="clearCompletedTodos"
        />
    </div>
</template>

<script>
import mainInput from '@/todo/todomaincompoments/mainInput.vue'
import mainItem from '@/todo/todomaincompoments/mainItem.vue'
import mainTabs from '@/todo/todomaincompoments/mainTabs.vue'
export default {
    data(){
        return{
            todos:[
                
            ],
            filter:'all'
        }
    },
    components:{
        mainInput,
        mainItem,
        mainTabs
    },
    computed:{
        filterTodos(){
            if(this.filter === 'all'){
                return this.todos;
            }
            if(this.filter === 'active'){
                return this.todos.filter(todo => todo.completed === false);
            }
            if(this.filter === 'completed'){
                return this.todos.filter(todo => todo.completed === true);
            }
        }
    },
    methods:{
        transmit(data){
            this.todos.unshift(data);
        },
        deleteTodo(id){
            this.todos.splice(this.todos.findIndex( todo=> todo.id === id), 1);
        },
        toggle(state){
            this.filter = state;
        },
        clearCompletedTodos(){
            this.todos = this.todos.filter(todo => todo.completed == false);
        }
    }
}
</script>

<style lang="scss" scoped>
    @import '@/assets/styles/normal.scss';
    $mainBg : #ccc;
    .todomain {
        @include flexCol;
        background-color: $mainBg;
        flex-grow: 1;
        align-items: center;
        justify-content: center;
    }
</style>
